import {Image, View} from "@tarojs/components";
import Taro from "@tarojs/taro";
import './index.scss'
import {useState} from "react";

function Index() {
  const [pageState,setPageState] = useState('put')

  //选择状态
  const selectPage=(name)=>{
    setPageState(name)
  }

  //点击新增
  const addHandler =()=>{
    Taro.navigateTo({
      url:'/pages/addServices/index'
    })
  }
  return (
    <View>
      <View style={{backgroundColor:'#fff',height:'80px',lineHeight:'80px'}}>
        <View className='iconfont icon-xiangzuo' style={{position:'absolute',top:'0',left:'0',fontSize:'22px',paddingTop:'6px',display:'flex'}}
              onClick={()=>Taro.navigateBack()}>
          <View style={{fontSize:'14px',paddingLeft:'4px'}}>服务项目</View>
        </View>
        <View style={{textAlign:'center',width:'100%'}}></View>
      </View>
      <View className='nav'>
        <View onClick={()=>selectPage('put')} style={{borderBottom: pageState=='put'?'10px solid #aaa':''}}>上架中</View>
        <View onClick={()=>selectPage('off')}  style={{borderBottom: pageState=='off'?'10px solid #aaa':''}}>未上架</View>
      </View>
      <View className='box'>
        <View className='list' style={{display:pageState=='put'?'block':'none'}}>
          <View className='item'>
            <View className='item_top'>
              <View className='img'>
                <Image src='https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658854800&t=9faf1b59613dc094698bd6cc1c8cfcc3'></Image>
              </View>
              <View className='context'>
                <View className='name'>项目名称</View>
                <View className='text'>疏肝理气、预防乳腺疾病；雕塑身形，疏通胸部经络；调节内分泌，青春永驻</View>
                <View className='num'>
                  <View>￥128.0</View>
                  <View className='time'>60分钟</View>
                </View>
              </View>
            </View>
            <View className='btn_box'>
              <View >编辑</View>
              <View>下架</View>
            </View>
          </View>
          <View className='item'>
            <View className='item_top'>
              <View className='img'>
                <Image src='https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658854800&t=9faf1b59613dc094698bd6cc1c8cfcc3'></Image>
              </View>
              <View className='context'>
                <View className='name'>项目名称</View>
                <View className='text'>疏肝理气、预防乳腺疾病；雕塑身形，疏通胸部经络；调节内分泌，青春永驻</View>
                <View className='num'>
                  <View>￥128.0</View>
                  <View className='time'>60分钟</View>
                </View>
              </View>
            </View>
            <View className='btn_box'>
              <View >编辑</View>
              <View>下架</View>
            </View>
          </View>
        </View>
        <View className='list'  style={{display:pageState=='off'?'block':'none'}}>
          <View className='item'>
            <View className='item_top'>
              <View className='img'>
                <Image src='https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658854800&t=9faf1b59613dc094698bd6cc1c8cfcc3'></Image>
              </View>
              <View className='context'>
                <View className='name'>项目名称</View>
                <View className='text'>疏肝理气、预防乳腺疾病；雕塑身形，疏通胸部经络；调节内分泌，青春永驻</View>
                <View className='num'>
                  <View>￥128.0</View>
                  <View className='time'>60分钟</View>
                </View>
              </View>
            </View>
            <View className='btn_box'>
              <View >编辑</View>
              <View>上架</View>
            </View>
          </View>
          <View className='item'>
            <View className='item_top'>
              <View className='img'>
                <Image src='https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658854800&t=9faf1b59613dc094698bd6cc1c8cfcc3'></Image>
              </View>
              <View className='context'>
                <View className='name'>项目名称</View>
                <View className='text'>疏肝理气、预防乳腺疾病；雕塑身形，疏通胸部经络；调节内分泌，青春永驻</View>
                <View className='num'>
                  <View>￥128.0</View>
                  <View className='time'>60分钟</View>
                </View>
              </View>
            </View>
            <View className='btn_box'>
              <View >编辑</View>
              <View>上架</View>
            </View>
          </View>
        </View>
        <View className='add' onClick={addHandler}>新增</View>

      </View>
    </View>
  );
}

export default Index;
